<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { PaginationProps } from "@pureadmin/table";
import { onMounted, reactive, ref } from "vue";
import { useDictionary } from "@/hooks/useDictionary";
import { getDataBySQLDesc } from "@/api/common";
import moment from "moment";
defineOptions({
  name: "Tracking"
});
const { dictData } = useDictionary("option1");
const loading = ref(false);
const form = ref({
  jssj: "",
  kssj: ""
});
const getTableData1 = async () => {
  let params = {
    action: "biz/reports/get_tqdh_zdsj_mr_pctj"
  };
  const { data } = await getDataBySQLDesc({
    ...params,
    ...form.value
  });
  if (data) {
    tableData1.value = data;
  }
};
const getTableData2 = async () => {
  let params = {
    action: "biz/reports/get_tqdh_zdsj_gys_pctj"
  };
  const { data } = await getDataBySQLDesc({
    ...params,
    ...form.value
  });
  console.log(data);
  if (data) {
    tableData2.value = data;
  }
};
const searchColumns: PlusColumn[] = [
  {
    label: "开始时间",
    prop: "kssj",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD",
      placeholder: "请选择开始时间"
    }
  },
  {
    label: "结束时间",
    prop: "jssj",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD",
      placeholder: "请选择结束时间"
    }
  },
  {
    label: "状态",
    prop: "djbcs",
    valueType: "select",
    options: [
      {
        label: "未解决",
        value: "0",
        color: "red"
      },
      {
        label: "已解决",
        value: "1",
        color: "blue"
      },
      {
        label: "解决中",
        value: "2",
        color: "yellow"
      },
      {
        label: "失败",
        value: "3",
        color: "red"
      }
    ]
  }
];
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const tableData1 = ref([]);
const tableData2 = ref([]);
const columns1 = ref([
  {
    prop: "供应商",
    label: "供应商名称"
  },
  {
    prop: "应到批次",
    label: "应到批次"
  },
  {
    prop: "按时到货批次",
    label: "按时到货批次"
  },
  {
    prop: "提前到货批次",
    label: "提前到货批次"
  },
  {
    prop: "全货到货率",
    label: "全货到货率",
    formatter: item => {
      return parseFloat(item["全货到货率"] * 100).toFixed(2) + "%";
    }
  }
]);
const columns2 = ref([
  {
    prop: "采购到厂日期",
    label: "采购到厂日期"
  },
  {
    prop: "应到批次",
    label: "应到批次"
  },
  {
    prop: "全货到货批次",
    label: "全货到货批次"
  },
  {
    prop: "全货到货率",
    label: "全货到货率",
    formatter: item => {
      return parseFloat(item["全货到货率"] * 100).toFixed(2) + "%";
    }
  }
]);
const handleChange = () => { };
const handleSearch = () => {
  getTableData1();
  getTableData2();
};
const handleRest = () => {
  form.value = {
    jssj: "",
    kssj: ""
  };
};
onMounted(() => {
  getTableData1();
  getTableData2();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @change="handleChange"
        @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="tableData1" :columns="columns1" :pagination="pagination" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="operate">
        <el-button type="primary">导出</el-button>
      </div>
      <PureTable ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="tableData2" :columns="columns2" :pagination="pagination" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}
</style>
